<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/header/head-common::commonHead('部门管理')">
</head>

<body class="sidebar-fixed header-fixed">
<div class="page-wrapper">
    <div class="title top_nav" th:replace="fragments/header/head-main::header"></div>
    <div class="main-container">
        <div th:replace="fragments/left/left-menu::left-menu"></div>
        <div class="content">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-light">
                        部门列表
                        <div class="btn btn-primary float-right" th:onclick="pageMethod.showFormPoP(1)">添加部门</div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover" th:fragment="dep-list">
                                <thead>
                                <tr>
                                    <th>描述</th>
                                    <th>ID</th>
                                    <th>名称</th>
                                    <th>小组数量</th>
                                    <th>员工总人数</th>
                                    <th>在职人数</th>
                                    <th>请假人数</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="dep:${list}">
                                    <td th:text="${dep.depdes}">1</td>
                                    <td th:text="${dep.depid}" class="text-nowrap">Samsung Galaxy S8</td>
                                    <td th:text=" ${dep.depname}">

                                    </td>
                                    <td th:text="${dep.depname}">$800</td>
                                    <td th:text="${dep.depname}">5%</td>
                                    <td th:text="${dep.depname}">5%</td>
                                    <td th:text="${dep.depname}">5%</td>
                                    <td>
                                        <button type="button" class="btn btn-primary" th:text="查看小组"
                                                th:onclick="'ajaxMethod.findGroup('+${dep.depid}+')'">查看小组
                                        </button>
                                        <button type="button" class="btn btn-primary" th:text="查看人员"
                                                th:onclick="ajaxMethod.findGroup()">查看人员
                                        </button>
                                        <!--<button type="button" class="btn btn-primary" th:text="查看人员" th:onclick="method.findGroup(dep)">查看人员</button>-->
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pop-up">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#home4" role="tab" aria-controls="home"
                       aria-expanded="false"><i class="icon-calculator"></i> 小组列表 &nbsp;<span
                            class="badge badge-success"></span></a>
                </li>
                <li class="nav-item" th:onclick="ajaxMethod.findGroupNameList()">
                    <a class="nav-link active" data-toggle="tab" href="#profile4" role="tab" aria-controls="profile"
                       aria-expanded="true"><i class="icon-basket-loaded"></i> 人员组成 &nbsp;<span
                            class="badge badge-pill badge-danger"></span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#messages4" role="tab" aria-controls="messages"><i
                            class="icon-pie-chart"></i> 业绩表现</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane" id="home4" role="tabpanel" aria-expanded="false">
                    <table class="table" id="group-list" th:fragment="group-list">
                        <thead>
                        <tr>
                            <th>排名</th>
                            <th>小组名称</th>
                            <th>小组职能</th>
                            <th>小组类型</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="group:${grouplist}" th:if="${grouplist!=null&&0<grouplist.size()}">
                            <td th:text="${group.id}"></td>
                            <td th:text="${group.groupName}"></td>
                            <td th:text="${group.groupDesc}"></td>
                            <td th:text="${group.groupType}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="tab-pane active" id="profile4" role="tabpanel" aria-expanded="true">
                    <div class="left-select" id="_select-group">
                        <div class="item-select bg-info"></div>
                    </div>
                    <div class="right-cart">
                        <div class="item-cart">
                            <canvas id="radar-chart" width="518" height="259" class="chartjs-render-monitor"
                                    style="display: block; width: 518px; height: 259px;"></canvas>
                        </div>
                        <div class="item-cart">
                            <canvas id="pie-chart" width="518" height="259" class="chartjs-render-monitor"
                                    style="display: block; width: 518px; height: 259px;"></canvas>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="messages4" role="tabpanel">
                    <div th:text="业绩报表"></div>
                </div>
            </div>
        </div>
        <div class="pop-form card">
            <div class="card">
                <form id="_sub-form" action="#" th:action="@{/createdep}" method="POST" th:object="${session.newDep}">
                    <div class="card-header bg-light">
                        部门设置
                        <input type="submit" class="btn btn-primary" th:value="提交"
                               onsubmit="return saveReport();"></input>
                        <input type="cancel" class="btn btn-warning" th:value="取消"
                               th:onclick="pageMethod.showFormPoP(0)"></input>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-5">
                                <label>部门名称</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">#</span>
                                    </div>
                                    <input type="text" name="depname" th:value="*{depname}" class="form-control"
                                           placeholder="Username">
                                </div>
                                <label>部门描述</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">@</span>
                                    </div>
                                    <input type="text" name="depdes" th:value="*{depdes}" class="form-control"
                                           placeholder="Username">
                                </div>
                                <label>部门联系人</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fa fa-user"></i></span>
                                    </div>
                                    <input type="text" th:value="*{depCallUser}" name="depCallUser" class="form-control"
                                           placeholder="联系人姓名">
                                </div>
                            </div>
                            <div class="col-md-5">
                                <label>部门电话</label>
                                <div class="input-group mb-3">
                                    <input type="text" th:value="*{depMobile}" name="depMobile" class="form-control"
                                           placeholder="联系电话"
                                           aria-describedby="basic-addon2">
                                    <div class="input-group-append">
                                        <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                                    </div>
                                </div>
                                <label>部门类型</label>
                                <div class="form-group input-group mb-3">
                                    <select id="single-select" class="form-control" th:value="*{deptype}"
                                            name="deptype">
                                        <option th:value="1">维护</option>
                                        <option th:value="2">开发</option>
                                        <option th:value="3">销售</option>
                                        <option th:value="4">实施</option>
                                        <option th:value="5">售后</option>
                                    </select>
                                </div>
                                <label>部门权限</label>
                                <div class="form-group input-group mb-3">
                                    <select id="multi-select" class="form-control" multiple="" th:value="*{power}"
                                            name="power">
                                        <option th:value="1">培训</option>
                                        <option th:value="2">任免</option>
                                        <option th:value="3">器材使用</option>
                                        <option th:value="4">必需品采购</option>
                                        <option th:value="5">审核</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <span th:include="fragments/header/head-js :: common-js"></span>
</div>
<script type="text/javascript">
    var pageData = {}
    var pageMethod = {
        editcart: function (data) {
            console.log("data is {}", data);
            // $("#_select-group").html();
            cartUtils.pieChart({
                abels: ["Red", "Blue", "Cyan", "Green", "Purple", "Orange"],
                datas: [100, 45, 87, 50, 77, 20]
            });
        },
        editGroupedit: function (data) {
            for (var x in data) {

            }
        },
        showFormPoP: function (data) {
            if (1 == data) {
                $(".pop-form").animate({top: 0}, 500);
            } else {
                $(".pop-form").animate({top: '300vh'}, 500);
            }

        }
    }
    var ajaxMethod = {
        ajaxError: function () {
            console.log("数据查询失败");
        },
        // 局部刷新第一种方式 ： 通过 load 加载 ，此方法 返回的是完整的HTML代码 ， 将原本的内容覆盖
        findGroup: function (data) {
            console.log(JSON.stringify(data));
            $('#group-list').load(rootUrl + "dep/getgroup?depid=" + data);
            pageData.depid = data;
        },
        //  局部刷新第二种方法 : 通过 AJAX 请求数据 , 然后html() 直接替换
        //  暂时查询的就这两种 , View 层的 框架用过一些 , thymeleaf 的动态加载能力确实感觉灵活度较低，建议前后端分离更好
        //  再例如 Primeface , JSF 的 框架 , 前后端严重耦合 , 但是作为 平台使用反而感觉很爽 , 前端直接调用后端一系列方法 ，简单实现异步加载
        //  thymeleaf +  Vue , 是一种比较合理的组合 , 也可以使用 react 等 ，都不错
        //  不过 , Thymeleaf 本身 仅仅为一种模板引擎 , 从某种意义上也应该当成静态的HTML 页面来对待 ,
        findCart: function (data) {
            ajaxutil.sendPostParam(rootUrl + "dep/getCart", {depid: pageData.depid}, pageMethod.editcart(data))
        },
        findGroupNameList: function (data) {
            ajaxutil.sendPostParam(rootUrl + "dep/getgroupajax", {depid: pageData.depid}, pageMethod.editGroupedit(data))
        },
        saveReport: function () {
            $("#_sub-form").ajaxSubmit(function (message) {
                console.log(message);
                // 对于表单提交成功后处理，message为提交页面saveReport.htm的返回内容
            });
            return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转

        }

    }

    $(function () {

    });

</script>
<style>
    td div {
        display: inline-block;
        width: 45%;
    }

    .right-cart .item-cart {
        width: 45%;
        display: inline-block;
    }

    .pop-form .btn {
        margin: 0.1rem 0.6rem;
    }

    .pop-form .btn-warning {
        width: 4rem;
    }

    .pop-form .col-md-5 {
        margin-left: 2.3rem;
    }
</style>
</body>
</html>

